<template>
  <el-card class="ik-chart-card">
    <div slot="header" class="clearfix">
      <span class="ik-chart-card-title">{{ title }}</span>
      <p class="table_title_img" />
      <span class="logo" />
    </div>
    <div
      :id="code"
      class="ik-chart-card-chart"
      :style="'height: ' + height + ''"
    >
      <span class="ik-label-main-value">{{ mainValue }}</span>
      <span class="ik-label-main-unit">{{ mainUnit }}</span>
      <table class="ik-label-secondary">
        <tr
          v-for="item in labelData"
          :key="item.id"
          class="ik-label-secondary-tr"
        >
          <td class="ik-label-secondary-td ik-label-secondary-firstAnalysis">
            <span>{{ item.firstAnalysis }}</span>
          </td>
          <td class="ik-label-secondary-td ik-label-secondary-secondAnalysis">
            <span>{{ item.secondAnalysis }}</span>
          </td>
          <td class="ik-label-secondary-td ik-label-secondary-value">
            <span>{{ item.value }}</span>
          </td>
        </tr>
      </table>
    </div>
  </el-card>
</template>

<script>
import { dimensionExtraction, initSingleSeries } from "@/views/frame/board/components/ik/echarts/dataProcess"

export default {
  name: "IkLabelBase",
  props: {
    title: {
      type: String,
      default: "标题"
    },
    code: {
      type: String,
      default: "label.base"
    },
    mainValue: {
      type: String,
      default: "192.29"
    },
    mainUnit: {
      type: String,
      default: "万"
    },
    data: {
      type: Array,
      default: function() {
        return [
          { type: "类型1", dep: "部门1", value: "30" },
          { type: "类型1", dep: "部门2", value: "30" },
          { type: "类型1", dep: "部门1", value: "30" },
          { type: "类型4", dep: "部门2", value: "30" }
        ]
      }
    },
    // 数据分析维度 - 第一数据维度
    dataDimensionField: {
      type: String,
      default: "value"
    },
    gridType: {
      type: String,
      default: "summary"
    },
    // 计算属性的五大参数
    calculationParam1: {
      type: String,
      default: ""
    },
    calculationParam2: {
      type: String,
      default: ""
    },
    calculationParam3: {
      type: String,
      default: ""
    },
    calculationParam4: {
      type: String,
      default: ""
    },
    calculationParam5: {
      type: String,
      default: ""
    },
    // 数据分析维度 - 第一分析维度 - 列1
    firstAnalysisDimensionField: {
      type: String,
      default: "type"
    },
    firstAnalysisDimension: {
      type: Array,
      default: function() {
        return []
      }
    },
    // 数据分析维度 - 第二分析维度 - 列2
    secondAnalysisDimensionField: {
      type: String,
      default: ""
    },
    secondAnalysisDimension: {
      type: Array,
      default: function() {
        return []
      }
    },
    // 样式
    height: {
      type: String,
      default: "100%"
    }
  },
  data() {
    return {
      chartFirstAnalysisDimension: [],
      chartSecondAnalysisDimension: [],
      labelData: []
    }
  },
  watch: {},
  created() {
  },
  mounted() {
    this.init()
  },
  methods: {
    changeSize() {
      // 修改 echart 大小
      this.chart.resize()
    },
    init() {
      const $this = this
      // 如果第一维度不存在，通过字段抽取
      if ($this.firstAnalysisDimension.length === 0) {
        // 第一维度必需
        if ($this.firstAnalysisDimensionField === "") {
          console.log("First Analysis Dimension Field Is Null")
        }
        $this.chartFirstAnalysisDimension = dimensionExtraction(
          $this.data,
          $this.firstAnalysisDimensionField
        )
      } else {
        $this.chartFirstAnalysisDimension = $this.firstAnalysisDimension
      }
      // 如果第二维度不存在，通过字段抽取
      if ($this.secondAnalysisDimension.length === 0) {
        // 第二维度非必需，填写则抽取
        if ($this.secondAnalysisDimensionField !== "") {
          $this.chartSecondAnalysisDimension = dimensionExtraction(
            $this.data,
            $this.secondAnalysisDimensionField
          )
        }
      } else {
        $this.chartSecondAnalysisDimension = $this.secondAnalysisDimension
      }

      /* 生成 series */
      const series = initSingleSeries(
        $this.data,
        $this.chartFirstAnalysisDimension,
        $this.chartSecondAnalysisDimension,
        $this.firstAnalysisDimensionField,
        $this.secondAnalysisDimensionField,
        $this.dataDimensionField,
        $this.gridType
      )

      // 生成结果数据
      let i = 0
      for (const item in series) {
        for (const value in series[item]) {
          $this.$set($this.labelData, i, {
            "id": i,
            "firstAnalysis": $this.chartFirstAnalysisDimension[value],
            "secondAnalysis": item === "数据" ? "" : item,
            "value": series[item][value]
          })
          i += 1
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.ik-chart-card {
  width: 100%;
  height: 100%;
  position: relative;
  .ik-chart-card-chart {
    padding: 10px;
    color: #FFF;
    .ik-label-main-value {
      font-size: 26px;
    }
    .ik-label-main-unit {
      font-size: 16px;
    }
    .ik-label-secondary {
      padding-top: 10px;
      font-size: 12px;
      .ik-label-secondary-tr {
        height: 20px;
      }
      .ik-label-secondary-td {
        padding-top: 0px;
        width: 50px;
      }
      .ik-label-secondary-firstAnalysis {
        width: 35%;
      }
      .ik-label-secondary-secondAnalysis {
        width: 35%;
      }
      .ik-label-secondary-value {
        width: 20%;
      }
    }
  }
  ::v-deep .el-card__header {
    padding: 10px;
    position: absolute;
    width: 100%;
    .clearfix {
      height: 20px;
      line-height: 20px;
    }
  }
  ::v-deep .el-card__body {
    position: absolute;
    bottom: 0px;
    width: 100%;
    height: calc(100% - 41px) !important;
    padding: 0px;
    padding-left: 5px;
    canvas {
      width: 100% !important;
      height: 100% !important;
    }
  }
}
</style>
